
<widget-modal class="pipeline-config form-horizontal" widget-modal-title="Configure Delivery Pipeline">
    <form class="pipeline-config" name="pipeLineConfigForm" ng-submit="pipelineConfig.save(pipeLineConfigForm)"
          novalidate="novalidate">
        <div class="text-center form-group">Map your environments to the following pipeline stages.<br><i>Select radio button for production environment </i></div>
        <div class="form-group text-center" ng-repeat="map in pipelineConfig.environmentMappings">
            <div class="col-sm-1">
                <form-group ng-if="$index > pipelineConfig.environmentMappings.length - 2" input="radio">
                    <input
                            type="radio"
                            name="key"
                            class="form-control-inline text-center"
                            ng-value="map.key"
                            ng-model="pipelineConfig.radioValue"
                    >
                </form-group>
            </div>
            <div class="col-sm-3">
                <form-group input="key">
                    <input  type="text"
                            name="key_{{$index}}"
                            class="form-control-inline text-center"
                            ng-model="map.key"
                            minlength="1"
                            maxlength="8"
                            ng-change="pipelineConfig.validateStage()"
                            required />
                    <div class="alert-danger" ng-show="pipeLineConfigForm['key_' + $index].$invalid">Enter name</div>
                    <div class="alert-danger" ng-if='map.isDuplicate' >duplicate name</div>
                </form-group>
            </div>
            <div class="col-sm-5">
                <select class="form-control"
                        ng-model="pipelineConfig.mappings[map.key]"
                        ng-options="item.value as item.name for item in pipelineConfig.environments | orderBy: 'name'"
                        ng-change="pipelineConfig.validateDropDown()"
                        ng-disabled="pipelineConfig.environmentsDropdownDisabled">
                    <option value="">Select an environment</option>
                </select>
                <div class="alert-danger" ng-if='map.isDuplicateDropDown' >
                    choose different value
                </div>
            </div>

            <div>
                <dash-trash class="fa-lg" ng-click="pipelineConfig.deleteMapping(map)"></dash-trash>
            </div>

        </div>
        <div class="form-group text-center"
             ng-show="pipelineConfig.environmentMappings.length==0 || pipelineConfig.environmentMappings.length <  pipelineConfig.environments.length">
            <span class="fa fa-plus-circle fa-2x clickable" ng-click="pipelineConfig.addMapping()"></span>
        </div>
        <div class="button-row row text-center">
            <button class="btn btn-primary" ng-disabled="pipelineConfig.saveDisabled || pipelineConfig.saveDisabledDropDown" >Save</button>
        </div>
    </form>

</widget-modal>